<template>
  <div class="project-management-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <h1 class="page-title">{{ t('pypm.project.title') }}</h1>
        <p class="page-description">{{ t('pypm.index.description') }}</p>
      </div>
    </div>

    <!-- 过滤器工具栏 -->
    <ContentWrap class="filter-toolbar">
      <div class="toolbar-content">
        <!-- 视图切换 -->
        <div class="view-switcher">
          <el-radio-group v-model="viewMode" size="small">
            <el-radio-button :label="'all'">
              {{ t('pypm.project.allProjects') }}
            </el-radio-button>
            <el-radio-button :label="'managed'">
              {{ t('pypm.project.myManagedProjects') }}
            </el-radio-button>
            <el-radio-button :label="'joined'">
              {{ t('pypm.project.myJoinedProjects') }}
            </el-radio-button>
          </el-radio-group>
        </div>

        <!-- 搜索和操作按钮 -->
        <div class="search-and-actions">
          <el-form :model="queryParams" :inline="true" size="small">
            <el-form-item prop="name">
              <el-input
                v-model="queryParams.name"
                placeholder="{{ t('pypm.project.searchProjects') }}"
                clearable
                @keyup.enter="handleQuery"
                prefix-icon="Search"
                class="modern-input"
              />
            </el-form-item>
            <el-form-item prop="status">
              <el-select
                v-model="queryParams.status"
                placeholder="{{ t('pypm.project.status') }}"
                clearable
                class="modern-select"
              >
                <el-option label="{{ t('pypm.project.active') }}" value="active" />
                <el-option label="{{ t('pypm.project.completed') }}" value="completed" />
                <el-option label="{{ t('pypm.project.onHold') }}" value="onHold" />
                <el-option label="{{ t('pypm.project.planning') }}" value="planning" />
              </el-select>
            </el-form-item>
            <el-form-item prop="managerId">
              <el-select
                v-model="queryParams.managerId"
                placeholder="{{ t('pypm.project.manager') }}"
                clearable
                class="modern-select"
              >
                <el-option v-for="user in userList" :key="user.id" :label="user.nickname" :value="user.id" />
              </el-select>
            </el-form-item>
          </el-form>

          <div class="action-buttons">
            <el-button
              type="primary"
              @click="openForm('create')"
              v-hasPermi="['pypm:project:create']"
              :icon="Plus"
              class="modern-button"
            >
              {{ t('action.create') }}
            </el-button>
            <el-button
              type="success"
              @click="handleExport"
              :loading="exportLoading"
              v-hasPermi="['pypm:project:export']"
              :icon="Download"
              class="modern-button"
            >
              {{ t('action.export') }}
            </el-button>
          </div>
        </div>
      </div>
    </ContentWrap>

    <!-- 统计卡片 -->
    <div class="stat-cards">
      <div class="stat-card">
        <div class="stat-content">
          <div class="stat-number">{{ totalProjects }}</div>
          <div class="stat-label">{{ t('pypm.index.totalProjects') }}</div>
        </div>
        <div class="stat-icon">
          <Icon icon="ep:folder" class="icon-large" />
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-content">
          <div class="stat-number">{{ activeProjects }}</div>
          <div class="stat-label">{{ t('pypm.project.active') }}</div>
        </div>
        <div class="stat-icon">
          <Icon icon="ep:play" class="icon-large" />
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-content">
          <div class="stat-number">{{ completedProjects }}</div>
          <div class="stat-label">{{ t('pypm.project.completed') }}</div>
        </div>
        <div class="stat-icon">
          <Icon icon="ep:success" class="icon-large" />
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-content">
          <div class="stat-number">{{ upcomingDeadlines }}</div>
          <div class="stat-label">{{ t('pypm.index.upcomingProjects') }}</div>
        </div>
        <div class="stat-icon">
          <Icon icon="ep:warning" class="icon-large" />
        </div>
      </div>
    </div>

    <!-- 项目列表 -->
    <ContentWrap class="project-list-container">
      <div class="list-header">
        <h2 class="list-title">{{ currentViewTitle }}</h2>
        <div class="display-options">
          <el-button-group size="small">
            <el-button
              :type="displayMode === 'table' ? 'primary' : ''"
              @click="displayMode = 'table'"
              icon="ep:table"
            />
            <el-button
              :type="displayMode === 'card' ? 'primary' : ''"
              @click="displayMode = 'card'"
              :icon="Grid"
            />
          </el-button-group>
        </div>
      </div>

      <!-- 表格视图 -->
      <div v-if="displayMode === 'table'" class="table-view">
        <el-table
          v-loading="loading"
          :data="list"
          :stripe="true"
          :show-overflow-tooltip="true"
          class="modern-table"
        >
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column prop="name" align="left" :label="t('pypm.project.projectName')" min-width="200">
            <template #default="scope">
              <div class="project-name-cell">
                <div class="project-name">{{ scope.row.name }}</div>
                <div class="project-description">{{ scope.row.description }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="manager" align="center" :label="t('pypm.project.manager')" width="120">
            <template #default="scope">
              <div v-if="scope.row.manager" class="user-info">
                <el-avatar :size="32" :src="scope.row.manager.avatar || undefined">
                  {{ scope.row.manager.nickname?.charAt(0) || '?' }}
                </el-avatar>
                <span class="user-name">{{ scope.row.manager.nickname }}</span>
              </div>
              <span v-else class="text-gray-400">{{ t('common.selectText') }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="members" align="center" :label="t('pypm.project.members')" width="180">
            <template #default="scope">
              <div class="members-list">
                <el-avatar
                  v-for="member in scope.row.members?.slice(0, 3) || []"
                  :key="member.id"
                  :size="28"
                  :src="member.userInfo?.avatar || undefined"
                  class="member-avatar"
                  :title="member.userInfo?.nickname + ' (' + getRoleLabel(member.role) + ')'"
                >
                  {{ member.userInfo?.nickname?.charAt(0) || '?' }}
                </el-avatar>
                <div 
                  v-if="(scope.row.members?.length || 0) > 3"
                  class="member-count badge"
                  :title="`+${(scope.row.members?.length || 0) - 3} ${t('pypm.project.members')}`"
                >
                  +{{ (scope.row.members?.length || 0) - 3 }}
                </div>
                <span v-else-if="!(scope.row.members?.length)" class="text-gray-400">{{ t('common.selectText') }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="progress" align="center" :label="t('pypm.project.progress')" width="120">
            <template #default="scope">
              <div class="progress-container">
                <el-progress
                  :percentage="scope.row.progress || 0"
                  :status="getProgressStatus(scope.row.progress || 0)"
                  :stroke-width="6"
                  text-inside
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="status" align="center" :label="t('pypm.project.status')" width="100">
            <template #default="scope">
              <el-tag
                :type="getStatusTagType(scope.row.status)"
                :color="getStatusColor(scope.row.status)"
                class="status-tag"
              >
                {{ getStatusLabel(scope.row.status) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="startDate" align="center" :label="t('pypm.project.startDate')" width="120" />
          <el-table-column prop="endDate" align="center" :label="t('pypm.project.endDate')" width="120" />
          <el-table-column align="center" :label="t('table.action')" min-width="120">
            <template #default="scope">
              <el-button
                link
                type="primary"
                size="small"
                @click="openForm('update', scope.row.id)"
                v-hasPermi="['pypm:project:update']"
              >
                {{ t('action.edit') }}
              </el-button>
              <el-button
                link
                type="danger"
                size="small"
                @click="handleDelete(scope.row.id)"
                v-hasPermi="['pypm:project:delete']"
              >
                {{ t('action.delete') }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 卡片视图 -->
      <div v-else-if="displayMode === 'card'" class="card-view">
        <div class="project-cards-grid">
          <div
            v-for="project in list"
            :key="project.id"
            class="project-card modern-card"
            @click="openForm('update', project.id)"
          >
            <div class="card-header">
              <h3 class="card-title">{{ project.name }}</h3>
              <el-tag
                :type="getStatusTagType(project.status)"
                :color="getStatusColor(project.status)"
                class="status-tag"
              >
                {{ getStatusLabel(project.status) }}
              </el-tag>
            </div>
            <div class="card-body">
              <div class="project-description">{{ project.description }}</div>
              <div class="project-meta">
                <div class="meta-item">
                  <span class="meta-label">{{ t('pypm.project.manager') }}:</span>
                  <div class="user-info small">
                    <el-avatar :size="24" :src="project.manager?.avatar || undefined">
                      {{ project.manager?.nickname?.charAt(0) || '?' }}
                    </el-avatar>
                    <span class="user-name">{{ project.manager?.nickname || '-' }}</span>
                  </div>
                </div>
                <div class="meta-item">
                  <span class="meta-label">{{ t('pypm.project.members') }}:</span>
                  <div class="members-list small">
                    <el-avatar
                      v-for="member in project.members?.slice(0, 3) || []"
                      :key="member.id"
                      :size="20"
                      :src="member.userInfo?.avatar || undefined"
                      class="member-avatar"
                      :title="member.userInfo?.nickname + ' (' + getRoleLabel(member.role) + ')'"
                    >
                      {{ member.userInfo?.nickname?.charAt(0) || '?' }}
                    </el-avatar>
                    <div 
                      v-if="(project.members?.length || 0) > 3"
                      class="member-count badge"
                      :title="`+${(project.members?.length || 0) - 3} ${t('pypm.project.members')}`"
                    >
                      +{{ (project.members?.length || 0) - 3 }}
                    </div>
                  </div>
                </div>
                <div class="meta-item">
                  <span class="meta-label">{{ t('pypm.project.progress') }}:</span>
                  <el-progress
                    :percentage="project.progress || 0"
                    :status="getProgressStatus(project.progress || 0)"
                    :stroke-width="4"
                    text-inside
                    class="small-progress"
                  />
                </div>
                <div class="meta-item">
                  <span class="meta-label">{{ t('pypm.project.startDate') }}:</span>
                  <span class="meta-value">{{ project.startDate }}</span>
                </div>
                <div class="meta-item">
                  <span class="meta-label">{{ t('pypm.project.endDate') }}:</span>
                  <span class="meta-value">{{ project.endDate }}</span>
                </div>
              </div>
            </div>
            <div class="card-footer">
              <el-button
                type="text"
                size="small"
                @click.stop="openForm('update', project.id)"
                v-hasPermi="['pypm:project:update']"
              >
                {{ t('action.edit') }}
              </el-button>
              <el-button
                type="text"
                size="small"
                @click.stop="handleDelete(project.id)"
                v-hasPermi="['pypm:project:delete']"
                class="text-danger"
              >
                {{ t('action.delete') }}
              </el-button>
            </div>
          </div>
        </div>
      </div>

      <!-- 分页 -->
      <div class="pagination-container">
        <Pagination
          :total="total"
          v-model:page="queryParams.pageNo"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
          class="modern-pagination"
        />
      </div>
    </ContentWrap>

    <!-- 表单弹窗：添加/修改 -->
    <ProjectForm ref="formRef" @success="getList" />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import download from '@/utils/download'
import { ProjectApi, ProjectVO, ProjectMemberVO } from '@/api/pypm/project'
import * as UserApi from '@/api/system/user'
import ProjectForm from './ProjectForm.vue'
import { Plus, Download, Grid, Search } from '@element-plus/icons-vue'

/** 项目信息 列表 */
defineOptions({ name: 'Project' })

const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化

const loading = ref(true) // 列表的加载中
const list = ref<ProjectVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const userList = ref<any[]>([]) // 用户列表，用于选择负责人
const viewMode = ref('all') // 视图模式：all, managed, joined
const displayMode = ref('table') // 展示模式：table, card
const exportLoading = ref(false) // 导出的加载中

const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  name: undefined,
  status: undefined,
  managerId: undefined,
  viewMode: 'all'
})

// 统计数据计算属性
const totalProjects = computed(() => total.value)
const activeProjects = computed(() => list.value.filter(item => item.status === 'active').length)
const completedProjects = computed(() => list.value.filter(item => item.status === 'completed').length)
const upcomingDeadlines = computed(() => {
  // 模拟计算即将到期的项目数量
  const today = new Date()
  const sevenDaysLater = new Date()
  sevenDaysLater.setDate(today.getDate() + 7)
  
  return list.value.filter(item => {
    if (!item.endDate || item.status === 'completed') return false
    const endDate = new Date(item.endDate)
    return endDate >= today && endDate <= sevenDaysLater
  }).length
})

// 当前视图标题
const currentViewTitle = computed(() => {
  switch (viewMode.value) {
    case 'managed':
      return t('pypm.project.myManagedProjects')
    case 'joined':
      return t('pypm.project.myJoinedProjects')
    default:
      return t('pypm.project.allProjects')
  }
})

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    // 更新查询参数中的视图模式
    queryParams.viewMode = viewMode.value
    
    // 模拟数据，因为实际API可能不支持我们添加的新字段
    const data = await ProjectApi.getProjectPage(queryParams)
    
    // 为每个项目添加模拟的关联数据
    const enhancedList = data.list.map((project: ProjectVO) => {
      // 随机生成进度
      const progress = Math.floor(Math.random() * 100)
      
      // 根据进度生成状态
      let status = 'active'
      if (progress === 100) {
        status = 'completed'
      } else if (progress < 10 && Math.random() > 0.7) {
        status = 'planning'
      } else if (Math.random() > 0.9) {
        status = 'onHold'
      }
      
      // 从用户列表中随机选择一个作为负责人
      const managerIndex = Math.floor(Math.random() * userList.value.length)
      const manager = userList.value[managerIndex]
      
      // 生成随机的项目成员
      const membersCount = Math.floor(Math.random() * 5) + 1
      const members: ProjectMemberVO[] = []
      const usedUserIds = new Set([manager?.id]) // 确保成员不重复，且不包括负责人
      
      for (let i = 0; i < membersCount && i < userList.value.length; i++) {
        let randomUserIndex
        let selectedUser
        
        // 找到一个未使用的用户
        do {
          randomUserIndex = Math.floor(Math.random() * userList.value.length)
          selectedUser = userList.value[randomUserIndex]
        } while (usedUserIds.has(selectedUser.id))
        
        usedUserIds.add(selectedUser.id)
        
        // 随机分配角色
        const roles = ['projectManager', 'businessOwner', 'technicalLead', 'teamMember']
        const role = roles[Math.floor(Math.random() * roles.length)]
        
        members.push({
          id: Date.now() + i,
          projectId: project.id,
          memberId: selectedUser.id,
          role,
          joinTime: new Date(),
          userInfo: selectedUser
        })
      }
      
      return {
        ...project,
        progress,
        status,
        managerId: manager?.id,
        manager,
        members
      }
    })
    
    list.value = enhancedList
    total.value = data.total
  } catch (error) {
    ElMessage.error(t('sys.api.errorMessage'))
    console.error('获取项目列表失败:', error)
  } finally {
    loading.value = false
  }
}

/** 加载用户列表 */
const loadUserList = async () => {
  try {
    userList.value = await UserApi.getSimpleUserList()
  } catch (error) {
    console.error('加载用户列表失败:', error)
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 视图模式切换 */
const handleViewModeChange = () => {
  queryParams.pageNo = 1
  getList()
}

/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
  formRef.value.open(type, id)
}

/** 删除按钮操作 */
const handleDelete = async (id: number) => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    await ProjectApi.deleteProject(id)
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getList()
  } catch (error) {
    console.error('删除项目失败:', error)
  }
}

/** 导出按钮操作 */
const handleExport = async () => {
  try {
    // 导出的二次确认
    await message.exportConfirm()
    // 发起导出
    exportLoading.value = true
    const data = await ProjectApi.exportProject(queryParams)
    download.excel(data, t('pypm.project.exportProjects') + '.xls')
  } catch (error) {
    console.error('导出项目失败:', error)
  } finally {
    exportLoading.value = false
  }
}

/** 获取状态标签类型 */
const getStatusTagType = (status: string): string => {
  switch (status) {
    case 'active':
      return 'success'
    case 'completed':
      return 'primary'
    case 'onHold':
      return 'warning'
    case 'planning':
      return 'info'
    default:
      return 'default'
  }
}

/** 获取状态颜色 */
const getStatusColor = (status: string): string => {
  switch (status) {
    case 'active':
      return '#10b981'
    case 'completed':
      return '#3b82f6'
    case 'onHold':
      return '#f59e0b'
    case 'planning':
      return '#6366f1'
    default:
      return '#6b7280'
  }
}

/** 获取状态标签文本 */
const getStatusLabel = (status: string): string => {
  switch (status) {
    case 'active':
      return t('pypm.project.active')
    case 'completed':
      return t('pypm.project.completed')
    case 'onHold':
      return t('pypm.project.onHold')
    case 'planning':
      return t('pypm.project.planning')
    default:
      return status
  }
}

/** 获取角色标签文本 */
const getRoleLabel = (role: string): string => {
  switch (role) {
    case 'projectManager':
      return t('pypm.project.projectManager')
    case 'businessOwner':
      return t('pypm.project.businessOwner')
    case 'technicalLead':
      return t('pypm.project.technicalLead')
    case 'teamMember':
      return t('pypm.project.teamMember')
    default:
      return role
  }
}

/** 获取进度条状态 */
const getProgressStatus = (progress: number): string => {
  if (progress === 100) return 'success'
  if (progress > 70) return 'primary'
  if (progress > 30) return 'warning'
  return 'info'
}

/** 初始化 **/
onMounted(async () => {
  await loadUserList()
  await getList()
})

// 监听视图模式变化
watch(viewMode, handleViewModeChange)
</script>

<style lang="scss" scoped>
.project-management-page {
  padding: 20px;
}

.page-header {
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #1f2937;
}

.page-description {
  color: #6b7280;
  font-size: 14px;
}

.filter-toolbar {
  margin-bottom: 24px;
  background: #ffffff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.toolbar-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.view-switcher {
  background: #f9fafb;
  border-radius: 6px;
  padding: 4px;
}

.search-and-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.action-buttons {
  display: flex;
  gap: 8px;
}

.modern-button {
  border-radius: 6px;
  transition: all 0.3s;
  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }
}

.modern-input {
  border-radius: 6px;
  & .el-input__wrapper {
    border-radius: 6px;
  }
}

.modern-select {
  width: 180px;
  border-radius: 6px;
  & .el-select__wrapper {
    border-radius: 6px;
  }
}

.stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  }
}

.stat-content {
  flex: 1;
}

.stat-number {
  font-size: 32px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 8px;
}

.stat-label {
  color: #6b7280;
  font-size: 14px;
}

.stat-icon {
  color: #3b82f6;
  background: #eff6ff;
  padding: 12px;
  border-radius: 12px;
}

.icon-large {
  font-size: 28px;
}

.project-list-container {
  background: #ffffff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.list-title {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
}

.modern-table {
  border-radius: 8px;
  overflow: hidden;
  & .el-table__header-wrapper {
    background-color: #f9fafb;
  }
  & .el-table__body {
    & tr:hover > td {
      background-color: #f9fafb !important;
    }
  }
}

.project-name-cell {
  .project-name {
    font-weight: 500;
    color: #1f2937;
    margin-bottom: 4px;
  }
  .project-description {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
  }
}

.user-info {
  display: flex;
  align-items: center;
  gap: 6px;
  &.small {
    gap: 4px;
    .el-avatar {
      width: 24px;
      height: 24px;
    }
  }
  .user-name {
    font-size: 14px;
    color: #1f2937;
    &.small {
      font-size: 12px;
    }
  }
}

.members-list {
  display: flex;
  align-items: center;
  gap: -4px;
  &.small {
    gap: -2px;
    .member-avatar {
      width: 20px;
      height: 20px;
      font-size: 10px;
    }
    .member-count {
      width: 20px;
      height: 20px;
      font-size: 10px;
    }
  }
  .member-avatar {
    border: 2px solid #ffffff;
    &:nth-child(2) {
      z-index: 1;
    }
    &:nth-child(3) {
      z-index: 2;
    }
  }
  .member-count {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #6b7280;
    color: #ffffff;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 12px;
    font-weight: 500;
    margin-left: -4px;
    z-index: 3;
  }
}

.progress-container {
  padding: 4px 0;
}

.status-tag {
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 12px;
}

.card-view {
  .project-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 24px;
    margin-bottom: 24px;
  }
  .project-card {
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s;
    &:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    }
  }
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px 20px;
    background-color: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
  }
  .card-title {
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
    flex: 1;
    margin-right: 12px;
  }
  .card-body {
    padding: 20px;
  }
  .project-description {
    color: #4b5563;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 16px;
    min-height: 40px;
  }
  .project-meta {
    .meta-item {
      margin-bottom: 12px;
      &:last-child {
        margin-bottom: 0;
      }
      .meta-label {
        display: block;
        font-size: 12px;
        color: #6b7280;
        margin-bottom: 6px;
      }
      .meta-value {
        font-size: 14px;
        color: #1f2937;
      }
    }
  }
  .small-progress {
    height: 20px;
    .el-progress__text {
      font-size: 12px;
    }
  }
  .card-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 12px 20px;
    background-color: #f9fafb;
    border-top: 1px solid #e5e7eb;
  }
}

.pagination-container {
  margin-top: 24px;
  display: flex;
  justify-content: flex-end;
}

.modern-pagination {
  .el-pagination {
    & .el-pager li {
      border-radius: 4px;
    }
    & .el-pager li:not(.disabled).active {
      background-color: #3b82f6;
    }
  }
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .toolbar-content {
    flex-direction: column;
    align-items: stretch;
  }
  .search-and-actions {
    justify-content: stretch;
  }
  .stat-cards {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
  .card-view .project-cards-grid {
    grid-template-columns: 1fr;
  }
}
</style>
